<template>
  <div id="app">
    <Tabbar :key="tabBarKey"></Tabbar>
    <Header></Header>
    <router-view @updateKey="updateKeyFn"/>
    <Footer></Footer>
    <login v-show="isShowLoginModal"></login>
    <transition name="slide">
      <Toast v-show="isShowToast"></Toast>
    </transition>
  </div>
</template> 
<script>
import Tabbar from "@/components/Tabbar"
import Header from "@/components/Header"
import Footer from "@/components/Footer"
import login from "@/components/login"
import Toast from "@/components/Toast"
import {jingqingAPI,ReMenAPI} from "./request/api.js"
import {mapState} from "vuex"
export default {
  components:{
    Tabbar,
    Header,
    Footer,
    login,
    Toast
  },
  data(){
    return{
      tabBarKey:0
    }
  },
  methods:{
    updateKeyFn(){
      this.tabBarKey++
    }
  },
  computed:{
    ...mapState({
      isShowLoginModal:state =>state.showModal.isShowLoginModal,
      isShowToast:state => state.showToast.isShowToast
    })
  },
  async created(){
    // axios.get("http://kumanxuan1.f3322.net:8881/cms/products/recommend").then(res =>{
    //   console.log(res);
    // })

    // jingqingAPI().then(res=>{
    //   console.log(res);
    // })
    // ReMenAPI().then(res=>{
    //   console.log(res);
    // })

    let res1 = await jingqingAPI();
    console.log("res1:", res1);
    // let res2 = await ReMenAPI();
    // console.log("res2", res2);
  },
  watch:{
    "$route.path":{
      handler(newVal,oldVal){
        if(newVal != oldVal){
          console.log("key变化了");
          this.tabBarKey++;
        }
      }
    }
  },
  async created(){
    console.log("环境变量值：",process.env.VUE_APP_BASE_URL);
    console.log("环境变量值：",process.env.VUE_APP_TEST_NAME);
  }
}
</script>
<style lang="less">
/* 入场的起始状态 = 离场的结束状态 */
.slide-enter, .slide-leave-to{
  opacity: 0;
}

.slide-enter-active, .slide-leave-active{
  transition: opacity .3s linear;
}

.slide-enter-to, .slide-leave{
  opacity: 1;
}
</style>
